<template>
  <PageContainer title="设备监控">
    <div class="device-monitor">
      <!-- 实时状态概览 -->
      <el-row :gutter="20" class="status-overview">
        <el-col :span="6">
          <StatCard
            title="在线设备"
            :value="monitorData.onlineDevices"
            icon="Monitor"
            color="success"
            :trend="monitorData.onlineTrend"
          />
        </el-col>
        <el-col :span="6">
          <StatCard
            title="离线设备"
            :value="monitorData.offlineDevices"
            icon="Monitor"
            color="danger"
            :trend="monitorData.offlineTrend"
          />
        </el-col>
        <el-col :span="6">
          <StatCard
            title="故障设备"
            :value="monitorData.faultDevices"
            icon="Warning"
            color="warning"
            :trend="monitorData.faultTrend"
          />
        </el-col>
        <el-col :span="6">
          <StatCard
            title="维护设备"
            :value="monitorData.maintenanceDevices"
            icon="Tools"
            color="info"
            :trend="monitorData.maintenanceTrend"
          />
        </el-col>
      </el-row>

      <!-- 设备列表 -->
      <el-card title="设备实时状态" class="device-list-card">
        <template #header>
          <div class="card-header">
            <span>设备实时状态</span>
            <div class="header-actions">
              <el-button type="primary" @click="refreshData">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
              <el-button @click="exportData">
                <el-icon><Download /></el-icon>
                导出
              </el-button>
            </div>
          </div>
        </template>

        <el-table :data="deviceList" stripe>
          <el-table-column prop="deviceId" label="设备ID" width="120" />
          <el-table-column prop="deviceName" label="设备名称" width="150" />
          <el-table-column prop="location" label="位置" width="200" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag
                :type="getStatusType(row.status)"
                :effect="row.status === 'online' ? 'dark' : 'plain'"
              >
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lastHeartbeat" label="最后心跳" width="180" />
          <el-table-column prop="batteryLevel" label="电量" width="100">
            <template #default="{ row }">
              <el-progress
                :percentage="row.batteryLevel"
                :color="getBatteryColor(row.batteryLevel)"
                :stroke-width="8"
              />
            </template>
          </el-table-column>
          <el-table-column prop="temperature" label="温度" width="80" />
          <el-table-column prop="humidity" label="湿度" width="80" />
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="viewDetails(row)">
                详情
              </el-button>
              <el-button type="warning" size="small" @click="remoteControl(row)">
                远程控制
              </el-button>
              <el-button type="danger" size="small" @click="reportFault(row)">
                故障上报
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </PageContainer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, Download } from '@element-plus/icons-vue'
import PageContainer from '@/components/PageContainer.vue'
import StatCard from '@/components/StatCard.vue'

// 监控数据
const monitorData = reactive({
  onlineDevices: 156,
  offlineDevices: 8,
  faultDevices: 3,
  maintenanceDevices: 2,
  onlineTrend: 2.5,
  offlineTrend: -1.2,
  faultTrend: 0.8,
  maintenanceTrend: -0.5
})

// 设备列表
const deviceList = ref([
  {
    deviceId: 'RB001',
    deviceName: '智慧回收箱-001',
    location: '北京市朝阳区CBD商务区',
    status: 'online',
    lastHeartbeat: '2024-01-20 14:30:25',
    batteryLevel: 85,
    temperature: 25,
    humidity: 60
  },
  {
    deviceId: 'RB002',
    deviceName: '智慧回收箱-002',
    location: '北京市海淀区中关村',
    status: 'offline',
    lastHeartbeat: '2024-01-20 12:15:10',
    batteryLevel: 45,
    temperature: 23,
    humidity: 55
  },
  {
    deviceId: 'RB003',
    deviceName: '智慧回收箱-003',
    location: '北京市西城区金融街',
    status: 'fault',
    lastHeartbeat: '2024-01-20 14:28:45',
    batteryLevel: 92,
    temperature: 28,
    humidity: 65
  }
])

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 100
})

// 获取状态类型
const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    online: 'success',
    offline: 'danger',
    fault: 'warning',
    maintenance: 'info'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    online: '在线',
    offline: '离线',
    fault: '故障',
    maintenance: '维护'
  }
  return statusMap[status] || '未知'
}

// 获取电量颜色
const getBatteryColor = (level: number) => {
  if (level > 60) return '#67c23a'
  if (level > 30) return '#e6a23c'
  return '#f56c6c'
}

// 刷新数据
const refreshData = () => {
  ElMessage.success('数据已刷新')
}

// 导出数据
const exportData = () => {
  ElMessage.success('导出功能开发中')
}

// 查看详情
const viewDetails = (row: any) => {
  ElMessage.info(`查看设备 ${row.deviceName} 详情`)
}

// 远程控制
const remoteControl = (row: any) => {
  ElMessage.info(`远程控制设备 ${row.deviceName}`)
}

// 故障上报
const reportFault = (row: any) => {
  ElMessage.warning(`上报设备 ${row.deviceName} 故障`)
}

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.size = size
}

const handleCurrentChange = (page: number) => {
  pagination.page = page
}

onMounted(() => {
  // 模拟定时刷新
  setInterval(() => {
    // 更新心跳时间等
  }, 30000)
})
</script>

<style lang="scss" scoped>
.device-monitor {
  .status-overview {
    margin-bottom: 20px;
  }

  .device-list-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-actions {
        display: flex;
        gap: 8px;
      }
    }

    .el-pagination {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>